<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据统计</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="./echarts.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .total {
      width: 100vw;
      display: flex;
      flex-flow: column;
      background-color: #252B55;
      padding-bottom: 2.9375rem;
    }

    .head {
      height: 4.625rem;
      background: #010123;
    }

    .content {
      flex: 1;
      margin: 0 auto;
    }

    .titleOne {
      margin-top: 1.06vw;
      font-size: 1.25rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 1.25rem;

    }

    .titleOne>span {
      margin-left: 1.125rem;
      font-size: 0.75rem;
    }

    .overview {
      margin-top: 3.6875rem;
      padding-bottom: .625rem;
    }

    .overview_box {
      float: left;
      width: 14.6875rem;
      height: 7.6875rem;
      margin-right: 0.125rem;
      background: #010123;
      border-radius: 14px;
      border: 1px solid #292E59;
      display: flex;
      flex-direction: column;
      position: relative;
      text-align: center;
    }

    .overview::after {
      content: "";
      display: block;
      clear: both;
    }

    .overview_box>img {
      width: 3.5rem;
      height: 3.5rem;
      position: absolute;
      top: -1.75rem;
      left: 50%;
      transform: translate(-50%);
    }

    .overview_num {
      font-size: 1.5rem;
      font-family: PingFang-SC-Semibold, PingFang-SC;
      font-weight: 600;
      color: #FFFFFF;
      position: absolute;
      bottom: 2.75rem;
      left: 5.625rem;
    }

    .overview_name {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 17px;
      position: absolute;
      bottom: 1.3125rem;
      left: 5.625rem;
    }

    .dataImg_first {
      overflow: hidden;
    }

    .dataImg {
      width: 39.75rem;
      height: 29rem;
      position: relative;
      float: left;
      /* background-color: red; */
    }

    .dataImg2 {
      width: 34.6875rem;
      margin-left: .625rem;
    }

    .dataImg_box {
      width: 39.75rem;
      width: 100%;
      height: 24.4375rem;
      background: #010123;
      border-radius: 20px;
      border: 1px solid #424D82;
      position: absolute;
      bottom: 0;
      display: flex;
      flex-direction: column;
    }

    .dataImg_title {
      padding: 1.5rem 0;
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 20px;
    }

    .dataImg_title>span {
      font-size: 12px;
      margin-left: 1.4375rem;
      line-height: 20px;
    }

    .bitmap {
      position: absolute;
      top: 41px;
      left: 10.5rem;
    }

    .step1 {
      /* width: 6.25rem; */
      position: absolute;
      top: 2.125rem;
      left: 4.5rem;
    }

    .step1_num {
      position: absolute;
      font-size: 36px;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #FFFFFF;
      top: .875rem;
      left: 1.875rem;
    }

    .step1_all {
      /* background-color: #9FF6CB; */
    }

    .step1_all:hover {
      transform: scale(1.2, 1.2);
    }

    .step1_repair_num {
      text-align: center;
      font-size: 10px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9FF6CB;
      line-height: 20px;
      margin-top: .625rem;
    }

    .step1_info {
      position: absolute;
      width: 130px;
      left: -1.25rem;
    }

    .step1_name {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 22px;

    }

    .step2 {
      top: 12.8125rem;
      left: 5.75rem;
    }

    .step3 {
      top: 17.5rem;
      left: 13.9375rem;
    }

    .step4 {
      top: 12.8125rem;
      left: 23.5625rem;
    }

    .step5 {
      top: 10.1875rem;
      left: 30.5625rem;
    }

    .step6 {
      top: 1.375rem;
      left: 26.5rem;
    }

    .dataImg_header {
      width: 36.125rem;
      height: 2.9375rem;
      margin-top: 2.6875rem;
      background-color: #303C5Fed;
      margin-left: 1.75rem;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      text-align: center;
      line-height: 2.9375rem;
      font-size: 12px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.7);
    }

    .dataImg_header_info {
      width: 36.125rem;
      margin-left: 1.75rem;
      margin-top: .9375rem;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      text-align: center;
      line-height: 2.375rem;
      font-size: 12px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.7);
    }

    .dataImg_header_info:hover {
      background-color: #303C5Fed;
    }

    .dataImg_header_info_img {
      display: inline-block;
      text-align: left;
    }

    .dataImg_header_info_img>img {
      float: left;
      /* text-align: 14px; */
      margin: .3125rem 0.875rem .3125rem 2.25rem;
    }
  </style>
</head>

<body>
  <div class="total">
    <div class="head"></div>
    <div class="content">
      <!-- 总览标题 -->
      <div class="titleOne">
        总览
        <span>截止日期2022-09-30</span>
      </div>
      <!-- 总览 数据 -->
      <div class="overview">
        <div class="overview_box">
          <img src="./images/circular1.png" alt="">
          <div class="overview_num" id="rpaProcessCount">
            1000
          </div>
          <div class="overview_name">
            RPA执行次数
          </div>
        </div>
        <div class="overview_box">
          <img src="./images/circular2.png" alt="">
          <div class="overview_num">
            800
          </div>
          <div class="overview_name">
            RPA工单总数
          </div>
        </div>
        <div class="overview_box">
          <img src="./images/circular3.png" alt="">
          <div class="overview_num">
            600
          </div>
          <div class="overview_name">
            RPA已处理
          </div>
        </div>
        <div class="overview_box">
          <img src="./images/circular4.png" alt="">
          <div class="overview_num">
            200
          </div>
          <div class="overview_name">
            RPA未处理数
          </div>
        </div>
        <div class="overview_box">
          <img src="./images/circular5.png" alt="">
          <div class="overview_num">
            300
          </div>
          <div class="overview_name">
            RPA未处理数
          </div>
        </div>
      </div>
      <!-- 数据图 第一行 -->
      <div class="dataImg_first">
        <div class="dataImg">
          <div class="dataImg_title">
            阿里云
            <span>近7日</span>
          </div>
          <div class="dataImg_box" id="columnImg"></div>
        </div>
        <div class="dataImg dataImg2">
          <div class="dataImg_title">
            安全漏洞
          </div>
          <div class="dataImg_box">
            <img class="bitmap" src="./images/bitmap.png" alt="">
            <!-- 修复1 -->
            <div class="step1">
              <div class="step1_all">
                <img class="step1_img" src="./images/step1.png" alt="">
                <span class="step1_num">1</span>
              </div>
              <div class="step1_info">
                <div style="font-size: 16px;" class="step1_name">
                  Linux软件漏洞
                </div>
                <div style="font-size: 14px;" class="step1_repair_num">
                  已修复1
                </div>
              </div>

            </div>
            <!-- 修复2 -->
            <div class="step1 step2">
              <div class="step1_all">
                <img src="./images/step2.png" alt="">
                <span style="font-size: 21px;left: 1.8rem;" class="step1_num">2</span>
              </div>
              <div class="step1_info">
                <div style="width: 9.375rem;" class="step1_name">
                  Windows系统漏洞
                </div>
                <div class="step1_repair_num">
                  已修复1
                </div>
              </div>

            </div>
            <!-- 修复3 -->
            <div class="step1 step3">
              <div class="step1_all">
                <img style="width: 3.1875rem;height: 3.1875rem;" src="./images/step2.png" alt="">
                <span style="font-size: 21px;left: 1.3rem;top: .625rem;" class="step1_num">3</span>
              </div>
              <div class="step1_info">
                <div style="width: 6.375rem; " class="step1_name">
                  Web-CMS漏洞
                </div>
                <div style="width: 6.375rem;" class="step1_repair_num">
                  已修复1
                </div>
              </div>

            </div>
            <!-- 修复4 -->
            <div class="step1 step4">
              <div class="step1_all">
                <img src="./images/step4.png" alt="">
                <span style="font-size: 21px;left: 1.875rem;top: 1.3125rem;" class="step1_num">4</span>
              </div>
              <div class="step1_info">
                <div style="width: 6.775rem !important;text-align: center; " class="step1_name">
                  应用漏洞
                  (web扫描器）
                </div>
                <div class="step1_repair_num">
                  已修复1
                </div>
              </div>

            </div>
            <!-- 修复5 -->
            <div class="step1 step5">
              <div class="step1_all">
                <img style="width: 2.75rem;height: 2.75rem;" src="./images/step2.png" alt="">
                <span style="font-size: 21px;left: 1rem;top: .5125rem;" class="step1_num">5</span>
              </div>
              <div class="step1_info">
                <div style="width: 4.775rem !important;text-align: center; font-size: 11px;" class="step1_name">
                  应急漏洞
                </div>
                <div style="width: 4.775rem !important;" class="step1_repair_num">
                  已修复1
                </div>
              </div>

            </div>
            <!-- 修复6 -->
            <div class="step1 step6">
              <div class="step1_all">
                <img style="width: 4rem;height: 4rem;" src="./images/step2.png" alt="">
                <span style="font-size: 21px;left: 1.6rem;top: 1rem;" class="step1_num">6</span>
              </div>
              <div class="step1_info">
                <div style="width: 8.775rem !important;text-align: center; font-size: 11px;" class="step1_name">
                  应用漏洞 (软件成分分析）
                </div>
                <div style="width: 8.775rem !important;" class="step1_repair_num">
                  已修复1
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
      <!-- 数据图 第二行 -->
      <div class="dataImg_first">
        <div class="dataImg">
          <div class="dataImg_title">
            成本分析
            <span>近30天</span>
          </div>
          <div class="dataImg_box">
            <div class="dataImg_header">
              <span>账号</span>
              <span>本月金额</span>
              <span>环比上月</span>
            </div>
            <div class="dataImg_header_info">
              <span class="dataImg_header_info_img">
                <img src="./images/user.png" alt="">
                Squid Gas</span>
              <span>1000</span>
              <span style="color: #04AA77;">+42%</span>
            </div>
            <div class="dataImg_header_info">
              <span class="dataImg_header_info_img">
                <img src="./images/user.png" alt="">
                Squid Gas</span>
              <span>1000</span>
              <span style="color: #04AA77;">+42%</span>
            </div>
            <div class="dataImg_header_info">
              <span class="dataImg_header_info_img">
                <img src="./images/user.png" alt="">
                Squid Gas</span>
              <span>1000</span>
              <span style="color: #04AA77;">+42%</span>
            </div>
            <div class="dataImg_header_info">
              <span class="dataImg_header_info_img">
                <img src="./images/user.png" alt="">
                Squid Gas</span>
              <span>1000</span>
              <span style="color: #04AA77;">+42%</span>
            </div>
            <div class="dataImg_header_info">
              <span class="dataImg_header_info_img">
                <img src="./images/statistics.png" alt="">
                Squid Gas</span>
              <span>1000</span>
              <span style="color: #04AA77;">+42%</span>
            </div>
          </div>
        </div>
        <div class="dataImg dataImg2">
          <div class="dataImg_title">
            成本分摊
            <span>近30天</span>
          </div>
          <div class="dataImg_box" id="costSharingImg">

          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('columnImg'));
    // 指定图表的配置项和数据
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['', '', '', '', '', '', ''],
          axisTick: {
            alignWithLabel: true,
            show: false //y轴坐标点消失
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          splitLine: {
            show: false
          }
        }
      ],
      series: [
        {
          name: 'Direc1t',
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {
              color: function (params) {
                var colorlist = ['#A0F7FB', '#FFA800', '#139C5A', '#D81E1C', '#32585a', '#374C98', '#A0F7FB'];
                return colorlist[params.dataIndex];
              },
              barBorderRadius: [15, 15, 15, 15],
              opacity: 0.8
            }

          },
          data: [40, 52, 200, 334, 390, 330, 220],
          markPoint: {
            symbol: 'pin',//标记类型
            symbolSize: 30,//图形大小
            itemStyle: {
              normal: {
                color: '#424D82',
                borderColor: '#424D82',
                borderWidth: 1,            // 标注边线线宽，单位px，默认为1
                label: {
                  show: true,
                  textStyle: {
                    fontSize: 7,
                    color: '#4A93FD'
                  }
                }
              }
            },
            data: [//配置项
              { value: '40', xAxis: 0, yAxis: 60 },
              { value: '52', xAxis: 1, yAxis: 58 },
              { value: '200', xAxis: 2, yAxis: 200 },
              { value: '334', xAxis: 3, yAxis: 334 },
              { value: '390', xAxis: 4, yAxis: 390 },
              { value: '330', xAxis: 5, yAxis: 330 },
              { value: '220', xAxis: 6, yAxis: 220 },
            ]
          },

        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


    
    // 成本分摊图
    var costSharing = echarts.init(document.getElementById('costSharingImg'));
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        top: "10%",
        left: '3%',
        right: '5%',
        bottom: "6%",
        containLabel: true
      },
      xAxis: [
        {
          type: 'value',
          splitLine: {
            show: false
          },
          axisTick: {
            alignWithLabel: true,
            show: false //y轴坐标点消失
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          axisLabel: {
            show: false, // 不显示坐标轴上的文字
          },
        }
      ],
      yAxis: [
        {
          data: ['供应链金融', '仓储物流', '邦邦拍', '认甄验件', '多定损', '邦邦智配', '认甄溯源', '公司公共部分', '损余低碳', '大数据', 'M2B产品线', '邦易修', 'B2b产品线'],
          // inverse:true,//数组翻转显示
          type: 'category',
          splitLine: { // 去除辅助线
            show: false
          },
          axisTick: {
            alignWithLabel: true,
            show: false //y轴坐标点消失
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          axisLabel: {
            margin: 15,
            textStyle: {
              fontSize: 13,
              color: "#FFFFFF",
              opacity: 0.7
            }
          }
        },
        {
          type: 'category',
          data: ['¥0.3k', '¥0.3k', '¥0.3k', '¥0.3k', '¥0.3k', '¥0.3k', '¥0.3k', '¥0.3k', '¥0.3k', '¥0.3k', '¥0.3k', '¥0.3k'],
          inverse: true,//数组翻转显示
          axisTick: {
            alignWithLabel: true,
            show: false
          },
          axisLine: {
            show: false//不显示y轴的线
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 13,
              color: "#FFFFFF",
              opacity: 0.9
            }
          }
        }
      ],
      series: [
        {
          name: 'Direc1t',
          type: 'bar',
          barWidth: '28%',
          showBackground: true,
          itemStyle: {
            normal: {
              color: function (params) {
                var colorlist = ['#C4149C', '#139C5A', '#D7D728', '#EB8153', '#27B1A2', '#EE2D41', '#334B9D', '#27B1A2', '#FCA700', '#139C5A', '#6546BF', '#FFA800', '#139C5A'];
                return colorlist[params.dataIndex];
              },
              barBorderRadius: [15, 15, 15, 15],
              opacity: 0.9
            }

          },
          data: [40, 52, 200, 334, 390, 330, 220, 40, 52, 200, 334, 390, 330],


        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    costSharing.setOption(option);
    var  info={}
    info.rpaProcessCount=999
    $("#rpaProcessCount").html(info.rpaProcessCount);
    // 请求接口
    $.ajax({
      url: 'http://10.1.12.65:9000/rpa/api/statistic',
      // url: 'https://rpa.devops.bangbangas.com/rpa/api/statistic',
      type: 'GET',
      data: {},
      dataType: 'json',  
      success: function (res) {
        console.log("ppp", res);
      },
      error: function (data) { console.log("error"); }
    })
  
  </script>
</body>

</html>